<template>
  <div :class="this.$store.state.app.sidebar.opened ? 'contanierope' : 'contaniercle'
    " ref="appRef">
    <div class="header">
      <p id="weatherInfo"></p>
      <h2 class="gradient-text">
        <img src="../../assets//img/logo.png" alt="" style="width: 400px" />
      </h2>
      <br />
      <p class="time">{{ time }}</p>
    </div>
    <div class="box" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="left">
        <leftTop :online="OnlineQuantity" :offline="OfflineQuantity"></leftTop>
        <xs-pie></xs-pie>
        <leftBom :data="BoMdata"></leftBom>
      </div>
      <div class="center">
        <div id="chart" style="width: 100%; height: 90%"></div>
      </div>
      <div class="right">
        <xs-dotted :LIST="LIST"></xs-dotted>
        <!-- <xs-grad :list="Histogram"></xs-grad> -->
        <xs-line :data="BoMdata"></xs-line>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import * as echarts from "echarts";
import { TangshanMap } from "../../utils/map/Tanshang"; //echarts
import { getInfo } from "../../api/login"; //当前用户信息
import EventBus from "../../utils/map/click"; //自定义事件
import { listUser } from "../../api/system/user"; //具体设备信息
import leftTop from "./left-top.vue";
import leftBom from "./left-bottom.vue";
import { MapListALL } from "../../api/system/device"; //所有设备
import { listWarn } from "@/api/system/device"; //报警数据
import app from "../../store/modules/app";
const baseWidth = 1536;
const baseHeight = 707;
const baseProportion = baseWidth / baseHeight;
export default {
  components: {
    // Map,
    leftTop,
    leftBom,
  },
  computed: {
    ...mapState([
      //必须带引号
      "app",
    ]),
  },
  data() {
    return {
      loading: true,
      time: null, //时间
      BoMdata: [],
      OfflineQuantity: 0, //离线数量
      OnlineQuantity: 0, //在线数量
      UnknownQuantity: 0, //未知数量,
      scale: { width: "1", height: "1" }, // 缩放比例
      LIST: [], //设备信息数组
      Histogram: [],
      Show: false,
      BoMdata: [],
      deptId: "",
      statusList: [],
      apptype: app.state.sidebar.opened,
    };
  },
  created() {
    this.gettime(), this.DeviceNumber();
    EventBus.$on("Dpdata", (params) => {
      this.Show = true;
      this.InforMation(params.data.data.deviceId, params.data.data);
    });
  },
  mounted() {
    //高德地图密钥
    var AMAP_KEY = "be239e42a515e89d9ea0bb543acbd934";
    var weatherInfoDiv = document.getElementById("weatherInfo");
    // 定义获取天气信息函数
    function getAmapWeather() {
      var url = `https://restapi.amap.com/v3/weather/weatherInfo?key=${AMAP_KEY}&city=唐山&output=JSON`;
      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          console.log("天气", data);
          // 假设返回的数据格式如下：
          // {
          //   "status": "1",
          //   "city": "北京",
          //   "temperature": "25℃",
          //   "weather": "晴",
          //   "wind": "无持续风向",
          //   "humidity": "65%"
          // }
          weatherInfoDiv.innerHTML = `城市: ${data.lives[0].city} &nbsp;温度: ${data.lives[0].temperature}°C  &nbsp;天气: ${data.lives[0].weather}`;
        })
        .catch((error) => console.error("Error:", error));
    }
    // 调用天气函数
    getAmapWeather();
    // console.log("state", app.state.sidebar.opened);
    //echarts

    this.usermessage();
    this.alarm();
    //监听页面的变化
    this.adjustScale();
    window.addEventListener("resize", this.adjustScale);
  },
  watch: {
    // 监听 message 属性的变化
    "$store.state.app.sidebar.opened"(newValue, oldValue) {
      console.log("state", app.state.sidebar.opened);
      // this.adjustScale
    },
  },
  methods: {
    usermessage() {
      //查当前部门的设备
      getInfo().then((res) => {
        this.deptId = res.user.deptId;
        this.$socket.connect("deptId", this.deptId).onmessage = (event) => {
          let eventData = JSON.parse(event.data);
          console.log("收到 WebSocket 消息:", eventData);
          // 处理收到的消息数据
          if (eventData.type == '0') {
            this.SocketList = eventData.data;
            this.statusList = eventData.data;
            this.LIST = [this.statusList[0]]; //进来随机选择一个
            console.log(this.SocketList, this.$store.state.user);
          } else {
            this.warnList = eventData.data;
            console.log('数据---warnList', this.warnList);
          }

        };
      });
    },
    //给子组件传参的方法
    async InforMation(deviceId, Dpdata) {
      this.Dpdata = [Dpdata];
      this.LIST = this.statusList.find((item) => item.deviceId == deviceId)
        ? [this.statusList.find((item) => item.deviceId == deviceId)]
        : [];
      // this.Histogram = this.LIST
      console.log(this.LIST);
    },
    gettime() {
      setInterval(() => {
        // '../untils/time.js'
        this.time = this.$time.Timeday();
      }, 1000);
    },
    //设备信息和在线离线
    DeviceNumber() {
      MapListALL({ status: "3" }).then((res) => {
        this.BoMdata = res.data;
        res.data.forEach((item) => {
          console.log(item.statusLable);
          if (item.statusLable == "在线") {
            this.OnlineQuantity++;
          } else if (item.statusLable == "离线") {
            this.OfflineQuantity++;
          }
        });
        TangshanMap("chart", res);
        this.loading = false
      });
    },
    //等比例缩放
    adjustScale() {
      const currentRatio = window.innerWidth / window.innerHeight;
      let scale = 1;
      if (currentRatio > baseProportion) {
        // 如果当前比例宽于基准比例，则按高度缩放
        scale = window.innerHeight / baseHeight;
      } else {
        // 如果当前比例窄于或等于基准比例，则按宽度缩放
        scale = window.innerWidth / baseWidth;
      }
      // 设置缩放
      this.scale.width = scale;
      this.scale.height = scale;
      // 应用缩放
      this.$refs.appRef.style.transform = `scale(${scale})`;
      this.$refs.appRef.style.transformOrigin = "0 0";
    },
    async alarm() {
      try {
        const alarmdata = await listWarn({
          deptId: this.deptId,
          selectFlag: "1",
        });
        console.log(alarmdata);
      } catch (error) { }
    },
  },
  beforeDestroy() {
    EventBus.$off("Dpdata");

    this.$socket.disconnect();
  },
};
</script>

<style scoped lang="scss">
//盒子侧边关闭基准
.contaniercle {
  position: relative;
  width: 1536px;
  /* 基准宽度 */
  height: 679px;
  /* 基准高度 */
  overflow: hidden;
  background: url(../../assets/img/pageBg.png) no-repeat top center;
  background-size: cover;
}

//盒子侧边打开基准
.contanierope {
  position: relative;
  width: 1390px;
  /* 基准宽度 */
  height: 679px;
  /* 基准高度 */
  overflow: hidden;
  background: url(../../assets/img/pageBg.png) no-repeat top center;
  background-size: cover;
}

//盒子头部
.header {
  height: 10%;
  width: 100%;
  background: url(../../assets/img/top.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
}

.gradient-text {
  // background: -webkit-linear-gradient(to right, rgb(0, 162, 255), red); /* For Safari 5.1 to 6.0 */
  background: linear-gradient(to right,
      rgb(62, 62, 225),
      rgb(0, 170, 255));
  /* 标准的语法 */
  -webkit-background-clip: text;
  /* For Safari */
  background-clip: text;
  color: transparent;
  /* 使文本颜色透明 */
  display: inline;
  /* 确保背景裁剪适用于文本 */
}

//盒子身体
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  //身体右部分
  .right {
    width: 30%;
    height: 90%;
    margin-right: 5%;

    div {
      width: 100%;
      height: 48%;
    }
  }

  //身体左部分
  .left {
    width: 30%;
    height: 90%;
    margin-left: 1%;

    div {
      width: 100%;
      height: 32%;
    }
  }

  //中间地图
  .center {
    width: 30%;
    height: 100%;
  }
}

body {
  background-color: black;
}

.time {
  font-size: 15px;
  position: absolute;
  top: 10px;
  right: 160px;
  background: linear-gradient(to right,
      rgb(62, 62, 225),
      rgb(0, 170, 255));
  /* 标准的语法 */
  -webkit-background-clip: text;
  /* For Safari */
  background-clip: text;
  color: transparent;
  /* 使文本颜色透明 */
  display: inline;
  /* 确保背景裁剪适用于文本 */
}

#weatherInfo {
  font-size: 15px;
  display: flex;
  position: absolute;
  top: 10px;
  left: 100px;
  background: linear-gradient(to right,
      rgb(62, 62, 225),
      rgb(0, 170, 255));
  /* 标准的语法 */
  -webkit-background-clip: text;
  /* For Safari */
  background-clip: text;
  color: transparent;
  /* 使文本颜色透明 */
  display: inline;
  /* 确保背景裁剪适用于文本 */
}
</style>

<!-- <template>
  <div class="contanier">
    <div class="header">
      <h2>扬尘大屏信息数据展示</h2>
      <p>当前时间：{{ time }}</p>
    </div>
    <div class="content">
      <div class="large-left">
        <leftTop :online="OnlineQuantity" :offline="OfflineQuantity"></leftTop>
        <xs-pie></xs-pie>
        <leftBom :data="BoMdata"></leftBom>
      </div>
      <div class="large-center">
        <div id="chart" style="width: 800px; height: 800px; z-index: 1; margin-top: 140px;"></div>
        <div class="earth"></div>
        <div class="ling"></div>
        <div class="circle"></div>
      </div>
      <div class="large-right">
        <xs-dotted :LIST="LIST"></xs-dotted>
        <xs-grad :list="Histogram"></xs-grad>

      </div>
    </div>
  </div>
</template>
<script>
import EventBus from '../../utils/map/click';
import { listUser } from '../../api/system/user'
import * as echarts from 'echarts';
import { TangshanMap } from "../../utils/map/Tanshang"
import Map from "../components/Map.vue"
import { MapListALL } from '../../api/system/device'
import leftTop from './left-top.vue';
import leftBom from './left-bottom.vue';
import { getInfo } from '../../api/login';
export default {
  components: {
    Map,
    leftTop,
    leftBom
  },
  data() {
    return {
      time: null,//时间
      OfflineQuantity: 0,//离线数量
      OnlineQuantity: 0,//在线数量
      UnknownQuantity: 0,//未知数量
      LIST: [],
      Histogram: [],
      Show: false,
      BoMdata: [],
      deptId:''
    };
  },
  created() {

    EventBus.$on('Dpdata', (params) => {
      this.Show = true
      this.InforMation(params.data.data.deviceId, params.data.data)
    })

  },
  mounted() {
    TangshanMap('chart')
    this.gettime();
    this.DeviceNumber()
    getInfo().then((res) => {
      this.deptId = res.user.deptId
      // this.Socket()
      this.$socket.connect('deptId',this.deptId).onmessage=(event)=>{
        console.log('收到 WebSocket 消息:', event.data);
        // 处理收到的消息数据
        this.SocketList = JSON.parse(event.data)
        this.statusList = JSON.parse(event.data)
        console.log(this.SocketList, this.$store.state.user)
      }
    })
  },
  methods: {

    async InforMation(deviceId, Dpdata) {
      try {
        const specificInformation = await listUser({})
        this.Dpdata = [Dpdata]

        this.Histogram = specificInformation.rows.find(item => item.deviceId == deviceId) ? [specificInformation.rows.find(item => item.deviceId == deviceId)] : []
        this.LIST = this.Histogram
        console.log(this.LIST)
      } catch (error) {
        console.log(error)
      }
    },
    gettime() {
      setInterval(() => {
        // '../untils/time.js'
        this.time = this.$time.Timeday();
      }, 1000);
    },
    async DeviceNumber() {
      const Number = await MapListALL({ status: "3" })
      this.BoMdata = Number.data
      console.log(this.BoMdata)
      Number.data.forEach(item => {
        console.log(item.statusLable)
        if (item.statusLable == '在线') {
          this.OnlineQuantity++
        } else if (item.statusLable == '离线') {
          this.OfflineQuantity++
        }
      })
      console.log(this.OnlineQuantity)
    }
  },
  beforeDestroy(){
    EventBus.$off("Dpdata");

    this.$socket.disconnect();
  }
};
</script>
<style>
.contanier {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: url(../../assets/img/pageBg.png) no-repeat top center;
  background-size: cover;
}

/* 头部 header */
.header {
  height: 80px;
  line-height: 80px;
  background: url(../static/images/head_bg.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  position: relative;
  text-align: center;
}

.header h2 {
  flex: 1;
  font-size: 30px;
}

.header p {
  position: absolute;
  right: 30px;
  top: -30px;
}

/* 主体 content */
.content {
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.large-left {
  width: 25%;
  height: calc(100% - 80px);
}

.large-center {
  width: 50%;
  height: calc(100% - 80px);
  position: relative;
}

.large-center-num {
  box-sizing: border-box;
  width: 90%;
  position: absolute;
  top: 0px;
  left: 50px;
  height: 130px;
  background: rgba(101, 132, 226, 0.1);
  display: flex;
  justify-content: center;

  padding: 20px 10px;
}

.c-number-cent {
  width: 50%;
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.c-number {
  font-size: 35px;
  color: #ffeb7b;
  text-align: center;
  font-family: "electronicFont";
  margin-top: 15px;
  margin-bottom: 10px;
}

.c-text {
  color: rgba(255, 255, 255, 0.7);
}

.c-number-cent:nth-child(1)::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}

.c-number-cent:nth-child(2)::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}

.large-center>.earth {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../static/images/map.png);
  background-size: 100% 100%;
  opacity: 0.3;
}

.large-center>.ling {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../static/images/jt.png);
  animation: roling 10s linear infinite;
  opacity: 0.6;
  background-size: 100% 100%;
}

.large-center>.circle {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../static/images/lbx.png);
  animation: rocircle 15s linear infinite;
  opacity: 1;
  background-size: 100% 100%;
}

@keyframes rocircle {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes roling {
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

.large-right {
  margin-right: 50px;
  width: 25%;
  height: calc(100% - 80px);
}
</style> -->
